<template>
	<view class="container">
		<view class="">
			
		</view>
		<view class="head">
			<view @click="jiaYB()">
				<image src="../../static/tubiao_03.png" mode="" style="width: 260rpx;height: 40rpx;"></image>
			</view>
			<view class="tagTop">
				<view class="switchSign"></view>
				<view class="in" :class="{'topfixed-active':topfixed==1}" @click="input()">
					<input type="text" placeholder="搜索附近的油站" class="input" placeholder-class="iconfont icon-sousuo">
				</view>
				
			</view>
			
		</view>
		<view class="banner" @click="change1(index)">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item"><image src="../../static/banner2.png" mode=""></image> </view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/banner2.png" mode=""></image> </view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/banner2.png" mode=""></image> </view>
				</swiper-item>
			</swiper>
		</view>
		<!-- /banner -->
		<view class="nav">
			<view class="router">
				<scroll-view scroll-x="true" style="width: 100%;">
					<view class="flex">
						<dl v-for="(item,index) in list" :key="index"  @click="router(index)">
							<dt>
								<image :src=item.src style="width: 66px;height: 66px;"></image>
								<dd class="dd">{{item.name}}</dd>
							</dt>
						</dl>
					</view>
					
				</scroll-view>
				
			</view>
		</view>
		<!-- /nav -->
		<!-- <view class="jingX">
			<view class="xuan_1">
				<p>精选</p>
				<p class="xiaH">&nbsp;</p>
			</view>
			<view class="right">
				<select>
				        <option>北京</option>
				    </select>
			</view>
		</view> -->
		<view class="manJ flex" v-for="(item,index) in manJ" :key="index">
			<view class="two">
				<image :src="item.img" mode="" style="height: 150rpx;"></image>
			</view>
			<view class="two">
				<image :src="item.img" mode="" style="height: 150rpx;"></image>
			</view>
			<button class="btn">{{item.text}}</button>
			<button class="btn2">{{item.text}}</button>
		</view>
		<!-- /manJ -->
		<view class="big_box">
			<view class="switchSign"></view>
			<view class="jingx" :class="{'topfixed-active1':topfixed1==1}">
				
				<view class="flex jing">
					<view>精选</view>
					<view class="jing_zuo flex">
						<p>92#/筛选</p>
						<p>智能排序</p>
					</view>
				</view>
				<view class=" flex">
				<view class="xuanX" v-for="(xin,index) in list1" :key="index" >
					<view class="daX"><button @click="checkIndex(index)" :class="navIndex==index ? 'activite1' : ''">{{xin.name}}</button></view>
				</view>
				</view>
			</view>

			
			<view class="XxK" v-if="navIndex==0">
				<view class="middle">
					<p class="tuiJ">今日推荐</p>
					<view class="middle_zhong">
						<view class="aha" @click="tiaoZ()">
							<p class="shiY">鑫泰运石油</p>
							<view class="flex">
								<p class="bottom">三里庄路3号</p>
								<p class="bottom">2.60千米</p>
							</view>
							<view class="qian">
								<view class="left">
									<span class="qian1">￥</span><span class="red1">6.88</span><span class="qian1">/L</span><span class="jia">油站价￥8.17/L</span>
									<p class="wanD">完单返加油金1.29/升</p>
								</view>
								<view class="you">
									<button @click="tiaoZ()">立即加油</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
			</view>
			<view class="XxK" v-if="navIndex==1">
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
			</view>
			<view class="XxK" v-if="navIndex==2">
				<view class="aha">
					<p class="shiY">大运摩托石油</p>
					<view class="flex">
						<p class="bottom">三里庄路3号</p>
						<p class="bottom">2.60千米</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">￥</span><span class="red1">6.88</span><span class="qian1">/L</span><span class="jia">油站价￥8.17/L</span>
							<p class="wanD">完单返加油金1.29/升</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
			</view>
			<view class="XxK" v-if="navIndex==3">
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
				<view class="aha" v-for="(item,index) in aha" :key="index" @click="tiaoZ()">
					<p class="shiY">{{item.name}}</p>
					<view class="flex">
						<p class="bottom">{{item.text}}</p>
						<p class="bottom">{{item.text2}}</p>
					</view>
					<view class="qian">
						<view class="left">
							<span class="qian1">{{item.text3}}</span><span class="red1">{{item.text4}}</span><span class="qian1">{{item.text5}}</span><span class="jia">{{item.text6}}</span>
							<p class="wanD">{{item.text7}}</p>
						</view>
						<view class="you">
							<button>{{item.text8}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topfixed: 0,
				topfixed1: 0,
				navIndex: 0,
				list:[
					{
					name:'团油养车',
					src:'../../static/ty.png',
				},
				{
					name:'省钱会员',
					src:'../../static/ty4.png',
				},
				{
					name:'签到',
					src:'../../static/ty5.png',
				},
				{
					name:'车辆充电',
					src:'../../static/ty3.png',
				},
				{
					name:'认证有奖',
					src:'../../static/ty6.png',
				},
				{
					name:'转盘抽奖',
					src:'../../static/ty7.png',
				},
				{
					name:'外卖红包',
					src:'../../static/ty8.png',
				},
				{
					name:'重要通知',
					src:'../../static/ty9.png',
				},
				],
				list1:[
					{
					name:'团油优选'
				},
				{
					name:'多加多送'
				},
				{
					name:'加油返券'
				},
				{
					name:'免费洗车'
				},
				],
				manJ:[
					{
						img:'../../static/d1_03.png',text:'快抢'
					}
				],
				aha:[{
					name:'鑫泰运石油',
					name:'八岐大蛇',
					text:'三里庄路3号',
					text2:'2.60km',
					text3:'￥',
					text4:'6.88',
					text5:'/L',
					text6:'油站价￥8.17/L',
					text7:'完单返加油金1.29/升',
					text8:'立即加油'
				}]
			}
		},
		onPageScroll(res) {
			var _this = this
			var temptop;
			const query = uni.createSelectorQuery();
			query.select('.switchSign').boundingClientRect();
			query.selectViewport().scrollOffset();
			query.exec(function(res) {
				console.log(res);
				res[0].top 
				res[1].scrollTop 
				temptop = res[0].top;
				if (temptop <= '2') {
					_this.topfixed = 1;
					_this.topfixed1 = 1;
				} else {
					_this.topfixed = 0;
					_this.topfixed1 = 0;
				}
			})
		},
		methods: {
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
			router:function(index){
				console.log(index)
				if(index == 0){ 
					uni.navigateTo({
						url:'/pages/index/tuanY',
					})
				}
				else if (index == 1){
					uni.navigateTo({
						url:'/pages/me/huiyuan',
					})
				} else if(index==2){
					uni.navigateTo({
						url:'../me/qian',
					})
				} else if(index==3){
					uni.navigateTo({
						url:'/pages/index/renZ',
					})
				} else if(index==4){
					uni.navigateTo({
						url:'/pages/index/choujiang',
					})
				} else if(index==5){
					uni.navigateTo({
						url:'/pages/index/waiM',
					})
				} else if(index==6){
					uni.navigateTo({
						url:'/pages/index/zhongY',
					})
				} 
			},
			tiaoZ:function(){
				uni.navigateTo({
					url:"/pages/index_two/selected-details(1)"
				})
			},
			jiaYB:function(){
				uni.navigateTo({
					url:'/pages/index/jiaYB'
				})
			},
			change1:function(index){
				console.log(index)
				if(index == 0){ 
					uni.navigateTo({
						url:'/pages/index/tuanY',
					})
				}
				else if (index == 1){
					uni.navigateTo({
						url:'/pages/me/huiyuan',
					})
				} else if(index==2){
					uni.navigateTo({
						url:'/pages/index/qianD',
					})
				} else if(index==3){
					uni.navigateTo({
						url:'/pages/index/renZ',
					})
				} else if(index==4){
					uni.navigateTo({
						url:'/pages/index/choujiang',
					})
				} else if(index==5){
					uni.navigateTo({
						url:'/pages/index/waiM',
					})
				} else if(index==6){
					uni.navigateTo({
						url:'/pages/index/zhongY',
					})
				} 
			},
			input:function(){
				uni.navigateTo({
					url:'../index_two/search'
				})
			}
		}
	}
</script>

<style scoped>
	.in{padding:10rpx 0;}
	.tagTop {
		height: 80upx;
		line-height: 80upx;
		/* text-align: center; */
		/* background-color: #fff; */
	}
	.topfixed-active {
	 		width: 100%;
	 		padding: 0 25upx;
	 		position: fixed;
	 		top: var(--window-top);
	 		left: 0;
	 		background-color: #fff;
	 		z-index: 9;
	 		box-sizing: border-box;
	 	}
	.topfixed-active1{
		background-color: #fff;
		width: 100%;
		padding: 10px;
		position: fixed;
		top: 40px;
		left: 0;
		background: #fff;
		z-index: 10;
		box-sizing: border-box;
		border-radius: 0 0 10px 10px;
	} 
	.input{width:80%;border-radius: 50px;background-color:#ccc; height:40px;}
	image{width: 100%;}
	.daX button{width: 100%;height: 60rpx;}
	.container{width: 90%;margin: 0 auto;}
	.flex{display: flex;justify-content: space-between;}
	.shiY{font-size: 55rpx;font-weight: bold;padding: 10px 0;}
	.bottom{font-size: 26rpx;}
	.head{background-color: #f00;
	color: #fff;
	padding: 20rpx;
	}
	.dd{text-align: center;background-color: antiquewhite;}
	.big_box{background-color: ##f5f5f5}
	.tuiJ{color: aliceblue;padding: 10px 0;}
	.nav{background-color: #fff;margin: 10px 0;}
	.nav dd{font-size: 23rpx;padding-left: 8rpx;}
	.manJ{position: relative;}
	.manJ view{width: 50%;}
	.manJ view image{width: 100%;height: 260rpx;}
	.manJ button{background-color: darksalmon;}
	.btn{width: 120rpx;height: 50rpx;border-radius: 35px;position: absolute;top: 50rpx;left: 205rpx;font-size: 20rpx;}
	.btn2{width: 120rpx;height: 50rpx;border-radius: 35px;position: absolute;top: 50rpx;right: 15rpx;font-size: 20rpx;}
	.middle{background-color: #666;border-radius: 5px;padding: 5px 5px;}
	.middle_zhong{background-color: #fff;border-radius: 15px;padding: 5px 5px;}
	.qian1{font-size: 23rpx;}
	.red1{color: #f00;font-size: 50rpx;font-weight: bold;}
	.jia{color: #ccc;font-size:30rpx;padding-left: 20px;}
	.qian{overflow: hidden;padding-top: 20px;}
	.left{float: left;}
	.you{float: right;}
	.wanD{font-size: 30rpx;background-color: chocolate;border-radius: 5px;padding: 0 10px;}
	.aha{margin-top: 5px;padding: 10px;background-color: #fff;border-radius: 15px;}
	.xuanX button{border-radius: 25px;border: #ccc 1px solid;font-size: 25rpx;width: 100%;}
	.activite1{color: red;}
	.jing_zuo{width:50%;}
	.jing_zuo p{padding:10rpx;}
	.jing{padding:10rpx 0;}
</style>
